<template>
    <div>
        <!-- 面包屑导航区域 -->
        <div class="bread_box">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>文章管理</el-breadcrumb-item>
                <el-breadcrumb-item>文章列表</el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <!-- 卡片视图区域 -->
        <el-card class="box-card">
            <!-- 搜索与按钮区域 -->
            <el-form class="search_from"
            :model="searchForm" ref="searchFormRef"
            size="small" inline="true" label-width="70px">
                <el-form-item label="文章标题" prop="title">
                    <el-input v-model="searchForm.title" placeholder="请输入文章标题" clearable ></el-input>
                </el-form-item>
                <el-form-item label="文章作者" prop="author">
                    <el-input v-model="searchForm.author" placeholder="请输入作者名" ></el-input>
                </el-form-item>

                <el-form-item label="状态" prop="flag">
                    <el-select v-model="searchForm.flag"  placeholder="审核状态">
                        <el-option label="已审核" value="true"></el-option>
                        <el-option label="未审核" value="false"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="创建时间" prop="time">
                    <el-date-picker
                        v-model="searchForm.time"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        type="daterange"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>

                <el-form-item>
                  <el-button type="primary" icon="el-icon-search" size="mini" @click="searchArticle()">搜索</el-button>
                  <el-button  icon="el-icon-refresh" size="mini" @click="resetSearchForm()">重置</el-button>
                </el-form-item>
            </el-form>

            <div >
                <el-button type="primary" icon="el-icon-plus" size="mini">新增</el-button>
                <el-button type="success" icon="el-icon-edit" size="mini">修改</el-button>
                <el-button type="danger" icon="el-icon-delete" size="mini">删除</el-button>
                <el-button type="warning" icon="el-icon-download" size="mini">导出</el-button>
            </div>

            <!-- 文章列表区域 -->
            <el-table :data="articleList"
            :header-cell-style="{'text-align':'center'}"
            :cell-style="{'text-align':'center'}">
                <!-- <el-table-column type="index"></el-table-column> -->
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column type="expand" label="详细">
                  <template slot-scope="scope">
                    <!-- {{scope.row}} -->
                    <el-form label-position="right" class="articleDetailForm">
                      <el-row>
                        <el-col :span="8">
                          <el-form-item label="文章 Id：">
                            <span>{{ scope.row.article.id }}</span>
                          </el-form-item>
                          <el-form-item label="文章标题：">
                            <span>{{ scope.row.article.title }}</span>
                          </el-form-item>
                          <el-form-item label="发布时间：">
                            <span>{{ scope.row.article.created }}</span>
                          </el-form-item>

                        </el-col>
                        <el-col :span="6">
                          <el-form-item label="浏览量：">
                            <span>{{ scope.row.statistic.hits }}</span>
                          </el-form-item>
                          <el-form-item label="评论量：">
                            <span>{{ scope.row.statistic.commentsNum }}</span>
                          </el-form-item>
                          <el-form-item label="点赞量：">
                            <span>{{ scope.row.statistic.likes }}</span>
                          </el-form-item>
                        </el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="12">
                          <el-form-item label="文章摘要：">
                            <span class="limit_content">{{ scope.row.article.smallText }}</span>
                          </el-form-item>
                        </el-col>
                      </el-row>
                    </el-form>
                  </template>
                </el-table-column>
                <el-table-column label="文章标题" prop="article.title"></el-table-column>
                <el-table-column label="发布时间" prop="article.created"></el-table-column>
                <el-table-column label="作者" prop="author"></el-table-column>
                <el-table-column label="浏览量" prop="statistic.hits"></el-table-column>
                <el-table-column label="所属分类" prop="article.categories"></el-table-column>
                <el-table-column label="审核" >
                  <template slot-scope="scope">
                    <!-- {{scope.row.article}} -->
                    <el-switch v-model="scope.row.article.flag" @change="articleFlagChanged(scope.row.article)">
                    </el-switch>
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="180px">
                    <template slot-scope="scope">
                        <!-- 编辑按钮 -->
                        <el-button type="text" icon="el-icon-edit" size="mini"></el-button>
                        <!-- 删除按钮 -->
                        <el-button type="text" icon="el-icon-delete" size="mini" @click="delArticle(scope.row.article)"></el-button>
                        <!-- 分配角色按钮 -->
                        <!-- <el-tooltip class="item" effect="dark" content="分配角色" placement="top" :enterable="false">
                            <el-button type="warning" icon="el-icon-setting" size="mini"></el-button>
                        </el-tooltip> -->
                    </template>
                </el-table-column>
            </el-table>

             <!-- 分页区域 -->
            <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageInfo.cur"
            :page-sizes="[5, 8, 10, 20]"
            :page-size="pageInfo.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            background>
            </el-pagination>
        </el-card>
    </div>
</template>

<script>
export default {
  data () {
    return {
      // 获取文章列表的参数对象
      pageInfo: {
        cur: 1, // 当前页
        size: 5, // 页大小
        flag: '',
        leftTime: '',
        rightTime: ''
      },
      // 搜索条件表单
      searchForm: {
        title: '', // 文章标题
        author: '', // 文章作者
        flag: '', // 审核状态
        time: '' // 文章发布时间
      },
      // 文章列表
      articleList: [],
      total: 0
    }
  },
  methods: {
    // 获取文章列表
    async getArticleList () {
      const { data: res } = await this.$http.post('/article/adminSelect', this.pageInfo)
      console.log(res)
      if (res.code !== 200) return this.$message.error('获取文章列表失败！')
      // 文章列表赋值
      this.articleList = res.data.list
      this.total = res.data.total
    },
    // 根据搜索条件表单数据，查询文章列表
    async searchArticle () {
      this.pageInfo.flag = this.searchForm.flag
      this.pageInfo.leftTime = this.searchForm.time[0]
      this.pageInfo.rightTime = this.searchForm.time[1]
      this.getArticleList()
    },
    // 清空查询条件 searchForm 表单
    resetSearchForm () {
      this.$refs.searchFormRef.resetFields()
      this.pageInfo.flag = this.pageInfo.leftTime = this.pageInfo.rightTime = ''
      this.getArticleList()
    },
    // 监听 size 改变的事件
    handleSizeChange (newSize) {
    //   console.log(newSize)
      this.pageInfo.size = newSize
      this.getArticleList()
    },
    // 监听 cur 页码值 改变的事件
    handleCurrentChange (newCur) {
    //   console.log(newCur)
      this.pageInfo.cur = newCur
      this.getArticleList()
    },
    // 监听 switch 开关状态，实现审核
    async articleFlagChanged (articleInfo) {
      // 参数是一个对象，创建一个对象并对参数赋值
      var changeFlag = { id: articleInfo.id, flag: articleInfo.flag }
      const { data: res } = await this.$http.get('/article/setFlag', {
        params: changeFlag
      })
      console.log(res)
      if (res.code !== 200) {
        articleInfo.flag = !articleInfo.flag
        return this.$message.error('审核文章失败！')
      }
      if (articleInfo.flag) {
        return this.$message.success('审核文章成功！')
      } else {
        return this.$message.warning('取消审核文章成功！')
      }
    },
    // 根据文章id删除文章
    delArticle (info) {
      this.$confirm('此操作将永久删除该文章, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        console.log(info.id)
        const { data: res } = await this.$http.get(`/article/delete/${info.id}`)
        console.log(res)
        if (res.code !== 200) return this.$message.error('删除文章失败！')
        this.$message.success('删除文章成功！')
        this.getArticleList()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  },
  created () {
    this.getArticleList()
  }
}
</script>

<style lang="less" scoped>

</style>

<style lang="less" >
    .articleDetailForm{
      .el-form-item{
        .el-form-item__label{
          font-weight: 700 !important;
          line-height: 16px !important;
        }
        .el-form-item__content{
          line-height: 16px !important;
        }
        .limit_content{
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 3;
          overflow: hidden;
        }
      }
    }
</style>
